<template>
  <div>
    <a-form
        ref="formRef"
        name="advanced_search"
        class="ant-advanced-search-form"
        :model="props.formValue"
        @finish="onFinish"
    >
      <a-row :gutter="24">
        <template v-for="(item, index) in searchFormList.item" :key="index">
          <a-col v-show="expand || index <= 6" :span="props.itemSpan">
            <a-form-item
                :name="item.prop"
                :label="item.label"
                :rules="item.rule"
            >
              <template v-if="item.type === 'input'">
                <a-input v-model:value="props.formValue[item.prop]"
                         :placeholder="item.placeholder"
                         :maxlength="item.inputOptions?.maxLength"
                         :showCount="item.inputOptions?.showCount"
                         :type="item.inputOptions?.type || 'text'"
                ></a-input>
              </template>
              <template v-else-if="item.type === 'date'">
                <template v-if="item.dateOptions?.isRange">
                  <a-range-picker
                      class="form_content"
                      :showTime="item.showTime"
                      v-model:value="props.formValue[item.prop]"
                      :placeholder = "['开始日期','结束时间']"
                      :format="item.dateOptions.format || 'YYYY-MM-DD HH:MM:ss'"
                  />
                </template>
                <template v-else>
                  <a-date-picker
                      class="form_content"
                      :showTime="item.showTime"
                      v-model:value="props.formValue[item.prop]"
                      :placeholder = "item.placeholder.length > 0 ? item.placeholder : '请选择时间' "
                      :format="item.dateOptions?.format || 'YYYY-MM-DD HH:MM:ss'"
                  />
                </template>
              </template>
              <template v-else-if="item.type === 'select'">
                <a-select
                    v-model:value="props.formValue[item.prop]"
                    :defaultValue="item.defaultValue !== '' ? item.defaultValue : null"
                    class="form_content"
                    :mode="item.selectOptions?.mode || 'combobox' "
                    :allowClear="item.selectOptions?.allowClear || true"
                    :placeholder="item.placeholder"
                    :options="item.selectOptions?.options"
                ></a-select>
              </template>
            </a-form-item>
          </a-col>
        </template>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: right">
          <slot name="CustomButtonItem"></slot>
          <template v-if="searchFormList.searchButton.show">
            <a-button
                class="search-form_button"
                type="primary"
                html-type="submit"
            >搜索</a-button>
          </template>
          <template v-if="searchFormList.resetButton.show">
            <a-button class="search-form_button" @click="onReset()">重置</a-button>
          </template>
          <template v-if="searchFormList.item.length > 6">
            <a style="font-size: 12px" @click="expand = !expand">
              <template v-if="expand">
                <UpOutlined />
              </template>
              <template v-else>
                <DownOutlined />
              </template>
              展开
            </a>
          </template>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import { FormList } from './searchFormInterface.ts'
import type { FormInstance } from 'ant-design-vue'
const expand = ref(false)
const formRef = ref<FormInstance>()

const props:any = defineProps({
  searchFormList: {
    type: Object as () => FormList,
    required: true,
  },
  itemSpan: {
    type: Number,
    default: 6,
  },
  showTime: {
    type: Boolean,
    default: true,
  },
  formValue: {
    type: [Array, Object],
    required: true,
  },
})

const onFinish = (values: any) => {
  props.searchFormList.searchButton.event(replaceUndefinedWithEmpty(values))
}
function replaceUndefinedWithEmpty(
    obj: Record<string, any>
): Record<string, any> {
  const result: Record<string, any> = {}
  for (const key in obj) {
    if (obj[key] === undefined) {
      result[key] = ''
    } else {
      result[key] = obj[key]
    }
  }
  return result
}
function onReset() {
  formRef.value?.resetFields()
  props.searchFormList.resetButton.event()
}
</script>
<style scoped>
.ant-advanced-search-form {
  background: #ffffff;
  padding: 16px;
}
.form_content {
  width: 100%;
}
.search-form_button {
  margin-left: 8px;
}
#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 2px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
[data-theme='dark'] .ant-advanced-search-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #434343;
  padding: 24px;
  border-radius: 2px;
}
[data-theme='dark'] #components-form-demo-advanced-search .search-result-list {
  border: 1px dashed #434343;
  background: rgba(255, 255, 255, 0.04);
}
</style>
